<!DOCTYPE html>
<html>
    <head>
        <title>SparkMD5 readme example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../spark-md5.js"></script>
    </head>
    <body onload="init()">
        <input type="file" id="file" />
        <script>
            function init() {
                document.getElementById('file').addEventListener('change', function () {
                    var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
                        file = this.files[0],
                        chunkSize = 2097152,                             // Read in chunks of 2MB
                        chunks = Math.ceil(file.size / chunkSize),
                        currentChunk = 0,
                        spark = new SparkMD5.ArrayBuffer(),
                        fileReader = new FileReader();

                    fileReader.onload = function (e) {
                        console.log('read chunk nr', currentChunk + 1, 'of', chunks);
                        spark.append(e.target.result);                   // Append array buffer
                        currentChunk++;

                        if (currentChunk < chunks) {
                            loadNext();
                        } else {
                            console.log('finished loading');
                            console.info('computed hash', spark.end());  // Compute hash
                        }
                    };

                    fileReader.onerror = function () {
                        console.warn('oops, something went wrong.');
                    };

                    function loadNext() {
                        var start = currentChunk * chunkSize,
                            end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

                        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
                    }

                    loadNext();
                });
            }
        </script>
    </body>
</html>
